<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<vertical-section-layout section-title="管道定义" on-save-edit="vm.onSave()" on-edit="vm.onEdit()" on-cancel-edit="vm.onCancelEdit()" allow-edit="vm.allowEdit"
                         editable="vm.editableSection" keep-editable-after-save="true" the-form="vm.editFeedDefinitionForm">

    <readonly-section>
        <div layout="row" class="layout-padding-top-bottom">
            <span flex="25" class="property-name">管道名称</span>
            <div flex>
                {{vm.model.feedName}}
            </div>
        </div>
        <div layout="row" class="layout-padding-top-bottom">
            <span flex="25" class="property-name">系统名称</span>

            <div flex>
                {{vm.model.systemFeedName}}
            </div>
        </div>
        <div layout="row" class="layout-padding-top-bottom">
            <span flex="25" class="property-name">描述</span>

            <div flex>
                {{vm.model.description}}
            </div>
        </div>
        <div layout="row" class="layout-padding-top-bottom">
            <span flex="25" class="property-name">管道类型</span>

            <div flex>
                {{vm.model.templateName}}
            </div>
        </div>
        <div layout="row" class="layout-padding-top-bottom">
            <span flex="25" class="property-name">流程处理</span>

            <div ng-if="vm.model.isStream" layout="column" layout-align="start start">
                <span><ng-md-icon icon="tune" style="fill:#3483BA"></ng-md-icon> Stream</span>
                <span class="hint">系统 只会跟踪关键指标。 个人工作和步骤将不被跟踪。.</span>
            </div>

            <div ng-if="!vm.model.isStream" layout="column" layout-align="start start">
                <span><ng-md-icon icon="trending_flat" style="fill:#3483BA"></ng-md-icon> Batch</span>
                <span class="hint">系统将跟踪个别工作和步骤。</span>
            </div>
        </div>
    </readonly-section>
    <editable-section>
        <ng-form name="vm.editFeedDefinitionForm">
        <div layout="row" layout-align="space-between start">
            <md-input-container flex="45" class="condensed">
                <label>显示名称</label>
                <input required ng-model="vm.editModel.feedName" name="feedName" />

                <div ng-show="vm.editFeedDefinitionForm.feedName.$touched && vm.editFeedDefinitionForm.feedName.$invalid" ng-messages="vm.editFeedDefinitionForm.feedName.$error">
                    <div ng-show="vm.editFeedDefinitionForm.feedName.$error.required" ng-message="required">Required.</div>
                </div>
            </md-input-container>
            <div flex="10"></div>
            <md-input-container flex="45" class="condensed">
                <label>系统名称</label>
                <input  readonly ng-model="vm.editModel.systemFeedName"/>
            </md-input-container>
        </div>

        <md-input-container class="md-block condensed">
            <label>描述</label>
            <textarea ng-model="vm.editModel.description"></textarea>
        </md-input-container>
        <md-input-container flex="45" class="condensed">
            <label>管道类型</label>
            <input  readonly ng-model="vm.model.templateName"/>
        </md-input-container>
        </ng-form>
    </editable-section>
</vertical-section-layout>
